/*
 * @Author: 肖思汗 
 * @Date: 2025-06-25 09:26:35 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-18 15:34:20
 */


import { Check, Loading } from "@nutui/icons-react-taro";
import { Col, Divider, Range, Row, TextArea } from "@nutui/nutui-react-taro";
import { Image, Text } from "@tarojs/components";
import clsx from "clsx";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useState } from "react";
import MyEmpty from "src/components/MyEmpty/MyEmpty";
import utils from "src/utils/utils";
import { FontData } from "types/type";
import designerRender from "../Designer/designerRender";
import designerStore from "../Designer/designerStore";
import fontManage from "../myFabric/fontManage";
import addSpacingPNG from "./img/addSpacing.png";
import amplifyPNG from "./img/amplify.png";
import blodPNG from "./img/blod.png";
import centerAlignPNG from "./img/centerAlign.png";
import downloadSVG from "./img/download.svg";
import flipXPNG from "./img/flipX.png";
import flipYPNG from "./img/flipY.png";
import italicPNG from "./img/italic.png";
import leftAlignPNG from "./img/leftAlign.png";
import reducePNG from "./img/reduce.png";
import rightAlignPNG from "./img/rightAlign.png";
import subSpacingPNG from "./img/subSpacing.png";
import underlinePNG from "./img/underline.png";
import styles from "./textModel.module.less";
import textModelStore from "./textModelStore";
import MyPopup from "src/components/MyPopup/MyPopup";
import leftTopStore from "../LeftTop/leftTopStore";

interface Iprops {
    children?: ReactNode
}

// 字体编辑
const TextModel = observer(() => {

    const [tab, setTab] = useState(0);

    const fonts: Array<FontData> = toJS(textModelStore.fonts);

    if (
        !designerStore.activeObjectId ||
        designerStore.activeObjectType !== "text"
    ) {
        textModelStore.set({ show: false });
    }

    useEffect(() => {
        return () => {
            setTab(0);
        }
    }, [textModelStore.show]);

    return (
        <MyPopup
            hasHeader={false}
            hasMark={false}
            open={!leftTopStore.showColorPicker && textModelStore.show}
            className={styles.textModel}
            onClose={() => {
                textModelStore.set({ show: false });
            }}
        >
            <div className={styles.inputContainer}>
                <div className={styles.inputBox} >
                    <TextArea
                        className={styles.textArea}
                        value={textModelStore.text}
                        autoHeight={true}
                        cursorSpacing={60}
                        placeholder="请输入文字"
                        onChange={(v) => {
                            textModelStore.set({ text: v });
                            designerRender.modifyText("text", v);
                        }}
                    />
                </div>
                <Check
                    className={styles.okButton}
                    onClick={() => {
                        textModelStore.set({ show: false });
                    }}
                />
                {/* <Button
                    type="primary"
                    className={styles.okButton}
                    onClick={() => {
                        textModelStore.set({ show: false });
                    }}
                >确定</Button> */}
            </div>

            <div className={styles.tabs} >
                <span
                    className={clsx(styles.tab, tab === 0 && styles.active)}
                    onClick={() => setTab(0)}
                >字体</span>
                <span
                    className={clsx(styles.tab, tab === 1 && styles.active)}
                    onClick={() => setTab(1)}
                >样式</span>
            </div>


            {
                tab === 0 &&
                <>
                    {
                        fonts.length === 0 &&
                        <MyEmpty
                            description="暂无字体"
                        />
                    }
                    {/* 字体列表 */}
                    {
                        fonts.length > 0 &&
                        <div className={styles.fontsList} >
                            {
                                fonts.map((font, i) => {
                                    return (
                                        <div
                                            className={clsx(
                                                styles.fontImgBox,
                                                textModelStore.fontFamily === font.fontName && styles.active
                                            )}
                                            onClick={async () => {
                                                textModelStore.set({ fontFamily: font.fontName });
                                                await fontManage.loadFont([font.fontName]); // 加载字体
                                                designerRender.modifyText("fontFamily", font.fontName);
                                            }}
                                        >
                                            <Image
                                                key={i}
                                                mode="widthFix"
                                                className={styles.fontImg}
                                                src={utils.ossSuffix(font.fontImageUrl, 200)}
                                            />
                                            {
                                                fontManage.loadingFonts.includes(font.fontName) &&
                                                <Loading className={styles.loading} />
                                            }
                                            {
                                                !fontManage.loadedFonts.includes(font.fontName) &&
                                                !fontManage.loadingFonts.includes(font.fontName) &&
                                                <Image src={downloadSVG} className={styles.loading} />
                                            }
                                        </div>
                                    );
                                })
                            }
                            <Divider contentPosition="center">没有更多了</Divider>
                        </div>

                    }
                </>
            }

            {
                tab === 1 &&
                <div className={styles.styleBox} >
                    <Row className={styles.colorRow} >
                        <Col span={4} >
                            <Text className={styles.colorLable} >文字颜色</Text>
                        </Col>
                        <Col span={20} className={styles.colorItemBox}  >
                            {
                                ([
                                    "#FFFFFF", "#000000", "#A3A3A3", "#FACAD6", "#F25352",
                                    "#F41641", "#EB1D65", "#F50255", "#F4356E", "#C294FE",
                                    "#9765FF", "#8A41F3", "#7517F4", "#95D7FA", "#63BDF9",
                                    "#507EF6", "#384EF2", "#88F1D3", "#6DEAB2", "#61D1A1",
                                    "#469C79", "#D0EFA1", "#B6E676", "#97D04D", "#689A39",
                                    "#F6E08E", "#E69C3B", "#E68332", "#9A531F", "#D3B145",
                                    "#D6D6D8", "#9E9E9E", "#5F5F61", "#D1D5DC", "#929EAE",
                                    "#65748B", "#313D4D"
                                ] as Array<`#${string}`>).map((color, index) => {
                                    const active = (textModelStore.color === color);
                                    return (
                                        <div
                                            className={clsx(styles.colorItemBoder, active && styles.active)}
                                            style={{
                                                // boxShadow: active ? `4rpx 4rpx 4rpx rgba(0, 0, 0, 0.5)` : "none",
                                                border: `4rpx solid ${active ? color : "#ffffff00"}`
                                            }}
                                        >
                                            <Text
                                                key={index}
                                                className={clsx(styles.colorItem, active && styles.active)}
                                                style={{
                                                    backgroundColor: color,
                                                    // border: `4rpx solid ${active ? "#ffffff00" : "#ffffff00"}`
                                                }}
                                                onClick={() => {
                                                    textModelStore.set({ color: color });
                                                    designerRender.modifyText("fill", color);
                                                }}
                                            >
                                            </Text>
                                        </div>
                                    );
                                })}
                        </Col>
                    </Row>

                    <Row className={styles.btnRow} >
                        <Image
                            src={blodPNG}
                            className={clsx(styles.btn, textModelStore.fontWeight === "bold" && styles.active)}
                            onClick={() => {
                                designerRender.modifyText("fontWeight", textModelStore.fontWeight === "bold" ? "normal" : "bold");
                                textModelStore.set({ fontWeight: textModelStore.fontWeight === "bold" ? "normal" : "bold" });
                            }}
                        />
                        <Image
                            src={italicPNG}
                            className={clsx(styles.btn, textModelStore.fontStyle === "italic" && styles.active)}
                            onClick={() => {
                                designerRender.modifyText("fontStyle", textModelStore.fontStyle === "italic" ? "normal" : "italic");
                                textModelStore.set({ fontStyle: textModelStore.fontStyle === "italic" ? "normal" : "italic" });
                            }}
                        />
                        <Image
                            src={underlinePNG}
                            className={clsx(styles.btn, textModelStore.underline && styles.active)}
                            onClick={() => {
                                designerRender.modifyText("underline", !textModelStore.underline);
                                textModelStore.set({ underline: !textModelStore.underline });
                            }}
                        />
                        {/* <Image
                            src={horizontalPNG}
                            className={styles.btn}
                            onClick={() => {
                                designerRender.modifyText("direction", textModelStore.direction === "ltr" ? "rtl" : "ltr");
                            }}
                        />
                        <Image
                            src={verticalPNG}
                            className={styles.btn}
                            onClick={() => {
                                designerRender.modifyText("direction", "vertical");
                            }}
                        /> */}
                        <Image
                            src={flipYPNG}
                            className={styles.btn}
                            onClick={() => {
                                designerRender.flipY()
                            }}
                        />
                        <Image
                            src={flipXPNG}
                            className={styles.btn}
                            onClick={() => {
                                designerRender.flipX()
                            }}
                        />
                        <Image
                            src={amplifyPNG}
                            className={styles.btn}
                            onClick={() => {
                                designerRender.amplify();
                            }}
                        />
                        <Image
                            src={reducePNG}
                            className={styles.btn}
                            onClick={() => {
                                designerRender.reduce();
                            }}
                        />
                        <Image
                            className={styles.btn}
                            src={addSpacingPNG}
                            onClick={() => {
                                designerRender.addSpacing();
                            }}
                        />
                        <Image
                            className={styles.btn}
                            src={subSpacingPNG}
                            onClick={() => {
                                designerRender.subSpacing();
                            }}
                        />
                        <Image
                            className={clsx(styles.btn, (textModelStore.textAlign === "left") && styles.active)}
                            src={leftAlignPNG}
                            onClick={() => {
                                textModelStore.set({ textAlign: "left" });
                                designerRender.modifyText("textAlign", "left");
                            }}
                        />
                        <Image
                            className={clsx(styles.btn, (textModelStore.textAlign === "center") && styles.active)}
                            src={centerAlignPNG}
                            onClick={() => {
                                textModelStore.set({ textAlign: "center" });
                                designerRender.modifyText("textAlign", "center");
                            }}
                        />
                        <Image
                            className={clsx(styles.btn, (textModelStore.textAlign === "right") && styles.active)}
                            src={rightAlignPNG}
                            onClick={() => {
                                textModelStore.set({ textAlign: "right" });
                                designerRender.modifyText("textAlign", "right");
                            }}
                        />

                    </Row>

                    <Row className={styles.colorRow} >
                        <Col span={4} >
                            <Text className={styles.colorLable} >描边颜色</Text>
                        </Col>
                        <Col span={20} className={styles.colorItemBox}  >
                            {
                                ([
                                    "#FFFFFF", "#000000", "#A3A3A3", "#FACAD6", "#F25352",
                                    "#F41641", "#EB1D65", "#F50255", "#F4356E", "#C294FE",
                                    "#9765FF", "#8A41F3", "#7517F4", "#95D7FA", "#63BDF9",
                                    "#507EF6", "#384EF2", "#88F1D3", "#6DEAB2", "#61D1A1",
                                    "#469C79", "#D0EFA1", "#B6E676", "#97D04D", "#689A39",
                                    "#F6E08E", "#E69C3B", "#E68332", "#9A531F", "#D3B145",
                                    "#D6D6D8", "#9E9E9E", "#5F5F61", "#D1D5DC", "#929EAE",
                                    "#65748B", "#313D4D"
                                ] as Array<`#${string}`>).map((color, index) => {
                                    const active = (textModelStore.stroke === color);
                                    return (
                                        <div
                                            className={clsx(styles.colorItemBoder, active && styles.active)}
                                            style={{
                                                // boxShadow: active ? `4rpx 4rpx 4rpx rgba(0, 0, 0, 0.5)` : "none",
                                                border: `4rpx solid ${active ? color : "#ffffff00"}`
                                            }}
                                        >
                                            <Text
                                                key={index}
                                                className={clsx(styles.colorItem, active && styles.active)}
                                                style={{
                                                    backgroundColor: color,
                                                    // border: `4rpx solid ${active ? "#ffffff00" : "#ffffff00"}`
                                                }}
                                                onClick={() => {
                                                    textModelStore.set({ stroke: color });
                                                    designerRender.modifyText("stroke", color);
                                                }}
                                            >
                                            </Text>
                                        </div>
                                    );
                                })}
                        </Col>
                    </Row>

                    <Row className={styles.colorRow} >
                        <Col span={4} >
                            <Text className={styles.strokeWidth} >描边宽度</Text>
                        </Col>
                        <Col span={20} className={styles.colorItemBox}  >
                            <Range
                                min={0}
                                step={1}
                                max={10}
                                value={textModelStore.strokeWidth}
                                className={styles.range}
                                onChange={(value: number) => {
                                    textModelStore.set({ strokeWidth: value });
                                    designerRender.modifyText("strokeWidth", value);
                                }}

                            />
                        </Col>
                    </Row>

                    <Row className={styles.colorRow} >
                        <Col span={4} >
                            <Text className={styles.strokeWidth} >文字行高</Text>
                        </Col>
                        <Col span={20} className={styles.colorItemBox}  >
                            <Range
                                min={1}
                                step={0.5}
                                max={3}
                                value={textModelStore.lineHeight}
                                className={styles.range}
                                onChange={(value: number) => {
                                    textModelStore.set({ lineHeight: value });
                                    designerRender.modifyText("lineHeight", value);
                                }}

                            />
                        </Col>
                    </Row>

                    <Row className={styles.colorRow} >
                        <Col span={4} >
                            <Text className={styles.strokeWidth} >文字弯曲</Text>
                        </Col>
                        <Col span={20} className={styles.colorItemBox}  >
                            <Range
                                min={0}
                                step={1}
                                max={360}
                                value={textModelStore.bendDegree}
                                className={styles.range}
                                onChange={(value: number) => {
                                    textModelStore.set({ bendDegree: value });
                                    designerRender.modifyText("bendDegree", value);
                                }}
                            />
                        </Col>
                    </Row>

                </div>
            }

        </MyPopup>
    );
});

export default TextModel;